<template>
	<view class="control" v-if="venueDetail.id">
		<view class="box-1">
			<image mode="widthFix"
				src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/727819f8a1ebb51e4708f4214333ae0aab46e80d.png">
			</image>
			<view class="postion">
				<view class="box-1-con">
					<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>
					<view class="box-1-dian flex-between">
						<view class="flex-center" style="height: 100%">
							<view class="image">
								<image mode="aspectFill" :src="venueDetail.venue_thumb"></image>
							</view>

							<view class="dian-info">
								<!-- <view class="title">{{ venueDetail.venue_name }}</view> -->
								<view class="tags flex-start">
									<u-tag v-for="(item, index) in venueDetail.marks" :key="index" :text="item.name"
										type="warning"></u-tag>
								</view>
								<view class="desc" @click="addresslist">地址：{{ venueDetail.address }}</view>
							</view>
						</view>

						<!-- <view class="btn" @click="addresslist"> 导航 </view> -->
						<view class="btn" @click="openStoreDetail"> 详情 </view>
					</view>
				</view>
				<view class="box-2-con">
					<view class="list">
						<view :class="[
                { 'item active': menuActive === item.name_sign },
                { item: menuActive != item.name_sign },
              ]" v-for="(item, index) in venueDetaillist" :key="index" @click="changeMenu(item,index, item.name_sign)">
							<image style="width: 50rpx; height: 50rpx;" class="icon" mode="widthFix" :src="item.icon">
							</image>
							<text>{{ item.name }}</text>
							<image class="jian" mode="aspectFit"
								src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70accdc329c0011116ca9/16406643030037836532.png">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>




		<!-- 会员办卡 -->
		<!-- <view class="box-2">
			<view class="data-list1" v-if="menuActive === 0">
				<u-tabs :list="list1" :activeStyle="{ fontWeight: 700 }" :inactiveStyle="{ color: '#999999' }"
					@click="tabClick"></u-tabs>
				<scroll-view scroll-y="true" class="scroll">
					<navigator :url=" '/page_venues/pages/venuesDetail/memberCard/memberCard' + '?id=' + item.id +
					  '&venue_name=' +
					  venueDetail.venue_name +
					  '&venue_id=' +
					  venueDetail.id
					" class="data-item flex-align" v-for="(item, index) in products" :key="index">
						<view class="image">
							<u--image :src="item.picture" width="100%" height="100%" radius="10"></u--image>
						</view>

						<view class="detail">
							<view>
								<view class="title ellipsis-1">{{ item.name }}</view>
								<view class="tag-list flex-align">
									<view class="tag" v-for="(tagItem, tagIndex) in item.venues_project"
										:key="tagIndex">{{ tagItem.name }}</view>
								</view> -->
		<!-- <view class="tiemr ellpisis-1">经常事件：2015/12/20</view> -->
		<!-- 		</view>
							<view class="flex-align">
								<view class="flex-align">
									<view class="price">￥{{ item.selling_price }}</view>
									<view class="price-2">￥{{ item.lineation }}</view>
								</view>
								<view style="margin-left:auto;color: #cfcfcf;font-size: 24rpx;">销量：{{item.volume}}
								</view>
							</view>
						</view>
					</navigator>
				</scroll-view>
			</view> -->

		<!-- 门票购买 -->
		<!-- <view class="data-list2" v-if="menuActive === 1">
				<u-tabs :list="list1" :activeStyle="{ fontWeight: 700 }" :inactiveStyle="{ color: '#999999' }"
					@click="tabClick"></u-tabs>
				<scroll-view scroll-y class="scroll">
					<navigator :url="
					  '/page_venues/pages/venuesDetail/ticketModule/ticketModule' +
					  '?id=' +
					  item.id +
					  '&venue_name=' +
					  venueDetail.venue_name +
					  '&venue_id=' +
					  venueDetail.id 
					" class="data-item flex-align" v-for="(item, index) in products" :key="index">

						<view class="image">
							<u--image :src="item.picture" width="100%" height="100%" radius="10"></u--image>
						</view>

						<view class="detail">
							<view>
								<view class="title ellipsis-1"><text style="font-size: 24rpx;color: #ffaa00" v-if="item.inventory == 0">[预约]</text><text style="margin-left: 10rpx;"> {{ item.name }}</text> </view>
								<view class="tag-list flex-align">
									<view class="tag" v-for="(tagItem, tagIndex) in item.venues_project"
										:key="tagIndex">{{ tagItem.name }}</view>
								</view> -->
		<!-- <view class="info ellipsis-1">“充300元送20”</view> -->
		<!-- 			</view>
							<view class="flex-between">
								<view class="price">￥{{ item.selling_price }}</view>
								<view class="price-2">已售：{{ item.actual + item.volume }}张</view>
							</view>
						</view>
					</navigator>
				</scroll-view>
			</view> -->
		<!-- 门票购买 -->
		<view class="box-2">
			<view class="data-list1" v-if="menuActive === 1">
				<u-tabs :list="list1" :activeStyle="{ fontWeight: 700 }" :inactiveStyle="{ color: '#999999' }"
					@click="tabClick"></u-tabs>
				<scroll-view scroll-y="true" class="scroll">
					<navigator :url="
						  '/page_venues/pages/venuesDetail/ticketModule/ticketModule' +
						  '?id=' +
						  item.id +
						  '&venue_name=' +
						  venueDetail.venue_name +
						  '&venue_id=' +
						  venueDetail.id 
						" class="data-item flex-align" v-for="(item, index) in products" :key="index">
						<view class="image">
							<u--image :src="item.picture" width="211rpx" height="248rpx" radius="5"></u--image>
						</view>
						<view class="detail">
							<view>
								<view class="title ellipsis-1"><text style="font-size: 30rpx;color: #ffaa00"
										v-if="item.inventory == 0">预约</text><text style="margin-left: 10rpx;">
										{{ item.name }}</text> </view>
								<view class="tag-list flex-align">
									<view class="tag" v-for="(tagItem, tagIndex) in item.venues_project"
										:key="tagIndex">{{ tagItem.name }}</view>
								</view>
								<view v-if="item.is_yxq != 0">
									<view class="info ellipsis-1"
										style="font-size: 26rpx;margin-top: 30rpx;color: #ffaa00;font-weight: bold;"
										v-if="item.is_days == 1">{{item.days}}天</view>
									<view class="info ellipsis-1"
										style="font-size: 26rpx;margin-top: 30rpx;color: #ffaa00;font-weight: bold;"
										v-else>{{item.specify}}</view>
								</view>
								<!-- <view class="tag-list flex-align" style="font-size: 22rpx;margin-top: 20rpx;">
									{{item.sale_start}}/{{item.sale_end}}
								</view> -->
							</view>
							<view class="flex-between">
								<!-- <view class="price">￥{{ item.selling_price }}</view> -->
								<price :value="item.selling_price" :color="'#ff4105'"></price>
								<view class="price-2" style="text-decoration: line-through">￥{{ item.lineation }}</view>
								<!-- <view class="price-2">已售：{{ item.actual + item.volume }}张</view> -->
								<view style="margin-left:auto;color: #cfcfcf;font-size: 24rpx;"
									v-if="item.volume >= item.sale_num">已售：{{item.volume}}</view>
								<view style="margin-left:auto;color: #cfcfcf;font-size: 24rpx;"
									v-if="item.volume < item.sale_num">已售：{{item.sale_num}}</view>
							</view>
						</view>

					</navigator>
				</scroll-view>
			</view>
			<!-- 会员办卡 -->
			<view class="data-list2" v-if="menuActive === 0">
				<u-tabs :list="list1" :activeStyle="{ fontWeight: 700 }" :inactiveStyle="{ color: '#999999' }"
					@click="tabClick"></u-tabs>
				<scroll-view scroll-y class="scroll">
					<navigator :url=" '/page_venues/pages/venuesDetail/memberCard/memberCard' + '?id=' + item.id +
						  '&venue_name=' +
						  venueDetail.venue_name +
						  '&venue_id=' +
						  venueDetail.id
						" class="data-item flex-align" v-for="(item, index) in products" :key="index">
						<view class="image">
							<u--image :src="item.picture" width="289rpx" height="183rpx" radius="5"></u--image>
						</view>

						<view class="detail">
							<view>
								<view class="title ellipsis-1">{{ item.name }}</view>
								<view class="tag-list flex-align">
									<view class="tag" v-for="(tagItem, tagIndex) in item.venues_project"
										:key="tagIndex">{{ tagItem.name }}</view>
								</view>
								<!-- <view class="tiemr ellpisis-1">经常事件：2015/12/20</view> -->
								<!-- 计次卡 -->
								<view class="tiemr ellpisis-1"
									style="font-size: 26rpx;margin-top: 20rpx;color: #ffaa00;font-weight: bold;"
									v-show="item.type == 1">{{ item.times }}次 <text v-show="item.gifts != ''">
										+{{ item.gifts }}次</text></view>
								<!-- 金额卡 -->
								<view class="tiemr ellpisis-1"
									style="font-size: 26rpx;margin-top: 20rpx;color: #ffaa00;font-weight: bold;"
									v-show="item.type == 3">{{ item.times }}元<text v-show="item.gifts != ''">
										+{{ item.gifts }}元</text></view>
								<!-- 时间卡 -->
								<view class="tiemr ellpisis-1"
									style="font-size: 26rpx;margin-top: 20rpx;color: #ffaa00;font-weight: bold;"
									v-show="item.type == 2">{{ item.times }}天<text v-show="item.gifts != ''">
										+{{ item.gifts }}天</text></view>
							</view>
							<view class="flex-align">
								<view class="flex-align">
									<!-- <view class="price">￥{{ item.selling_price }}</view> -->
									<price :value="item.selling_price" :color="'#ff4105'"></price>
									<view class="price-2" style="text-decoration: line-through">￥{{ item.lineation }}
									</view>
								</view>
								<view style="margin-left:auto;color: #cfcfcf;font-size: 24rpx;"
									v-if="item.sale_num <= item.volume">销量：{{item.volume}}
								</view>
								<view style="margin-left:auto;color: #cfcfcf;font-size: 24rpx;"
									v-if="item.sale_num > item.volume">销量：{{item.sale_num}}
								</view>
							</view>
						</view>
					</navigator>
				</scroll-view>
			</view>

			<!-- 场地预约 -->
			<view class="data-list" v-if="menuActive === 2">
				<u-tabs :list="list1" :activeStyle="{ fontWeight: 700 }" :inactiveStyle="{ color: '#999999' }"
					@click="tabClick"></u-tabs>
				<scroll-view scroll-y class="scroll">
					<!-- <navigator :url="'/page_venues/pages/venuesDetail/stadium/stadium' + '?id=' + item.id "  class="data-item flex-between" style="margin-top: 20rpx;"
						v-for="(item, index) in products" :key="index">-->
					<view @click="cdClick(item)" class="data-item flex-between" style="margin-top: 20rpx;"
						v-for="(item, index) in products" :key="index">
						<view class="flex-align" style="height: 100%">
							<view class="image">
								<image style="width: 156rpx;height: 154rpx;" mode="aspectFill" :src="item.show_img"></image>
							</view>

							<view class="detail">
								<view class="title">{{item.court_name}}</view>
								<view>
									<view class="tag-list flex-align" v-if="item.venues_project != ''">
										<!-- <view class="tag" v-for="(im, ix) in item.venues_project" :key="index" >{{im.name}}</view> -->
										<view v-if="item.venues_project[0].name != undefined" class="tag">
											{{item.venues_project[0].name}}
										</view>
										<view v-if="item.venues_project[1].name != undefined" class="tag">
											{{item.venues_project[1].name}}
										</view>
										<view v-if="item.venues_project[2].name != undefined" class="tag">
											{{item.venues_project[2].name}}
										</view>
										<view v-if="item.venues_project[3].name != undefined" class="tag">
											{{item.venues_project[3].name}}
										</view>
									</view>
									<view class="detail-info" v-if="item.dtPrice != ''">￥{{item.min_price}}/起
									</view>
									<!-- <view class="detail-info">￥30.00~50.00</view> -->

								</view>
							</view>
						</view>

						<view class="btn">去预约</view>
					</view>
					<!-- </navigator> -->
				</scroll-view>
			</view>

			<!-- 培训报班 -->
			<view class="data-list5" v-if="menuActive === 3">
				<u-tabs :list="list1" :activeStyle="{ fontWeight: 700 }" :inactiveStyle="{ color: '#999999' }"
					@click="tabClick"></u-tabs>
				<scroll-view scroll-y class="scroll">
					<navigator :url="
              '/pages_other/train/train' +
              '?id=' +
              item.id +
              '&venue_name=' +
              venueDetail.venue_name +
              '&venue_id=' +
              venueDetail.id+
              '&train_enum_id=' +
              item.train_enum_id
            " class="goods-item flex-align" v-for="(item, index) in products" :key="index">
						<view class="image">
							<u--image width="100%" height="100%" :src="item.cover"></u--image>
							<view class="image-info" v-if="item.sold_num >= item.stock_sales">{{item.sold_num}}人已报名</view>
							<view class="image-info" v-else>{{item.stock_sales}}人已报名</view>
							<view class="tag1" v-if="item.train_enum_id == 1">短训</view>
							<view class="tag2" v-if="item.train_enum_id == 2">长训</view>
							<view class="tag3" v-if="item.train_enum_id == 3">小班</view>
						</view>
						<view class="detail">
							<view>
								<view class="title elipsis-1">{{ item.name }}</view>
								<view class="detail-1 flex-align">
									<view class="tag" style="color: #fff;"
										v-for="(items, indexs) in item.venues_project" :key="indexs">{{ items.name }}
									</view>
								</view>
								<!-- <view class="flex-align detail-2">
									<image mode="aspectFit"
										src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/16b64ab661803b447f713dbd9d40c939b98f9a5b.png">
									</image>
									剩余名额：{{item.left_stock}}人
								</view> -->
							</view>
							<view class="flex-align">
								<view class="price">￥<text>{{ item.price_selling
                    }}<text style="font-size: 20rpx">起</text></text></view>
								<!-- <view class="info">{{ item.classNum }}节课</view> -->
							</view>
						</view>
					</navigator>
				</scroll-view>
			</view>
			<!-- 私教课程 -->
			<view class="data-list6" v-if="menuActive === 4">
				<u-tabs :list="list1" :activeStyle="{ fontWeight: 700 }" :inactiveStyle="{ color: '#999999' }"></u-tabs>
				<scroll-view scroll-y class="scroll">
					<view @click="openDetail" class="item flex-align" v-for="(item, index) in 10" :key="item">
						<view class="index">{{ index + 1 }}</view>
						<view class="flex-align con">
							<view class="image">
								<u--image width="100%" height="130rpx" src="https://cdn.uviewui.com/uview/album/1.jpg"
									shape="circle"></u--image>
								<image mode="aspectFit" class="small"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/c3d9ec46bec8cd3f02a5c9e0c2020af93119fa33.png">
								</image>
							</view>
							<view class="box">
								<view class="info-1 flex-align">
									<view class="name">王志艳</view>
									<u-tag text="男" borderColor="#e5f0ff" bgColor="#e5f0ff" color="#016DFF" size="mini">
									</u-tag>
									<u-tag text="从业10年" borderColor="#fff4e6" bgColor="#fff4e6" color="#FF8F05"
										size="mini">
									</u-tag>
								</view>
								<view class="info-2 flex-align">
									<uni-rate :size="15" :max="5" :value="4"></uni-rate>
									<view class="tag">游泳</view>
									<view class="tag">健身</view>
								</view>
								<view class="info-3">
									王紫嫣是国内资深的游泳教练，曾获得多次全短时嗲速递阿呆呆
								</view>
								<view class="info-4 flex-align">
									<u-icon :size="14" name="bag-fill"></u-icon>
									<view>点拖体育馆</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 商品租售 -->

			<view class="data-list7" v-if="menuActive === 5">
				<scroll-view scroll-x class="goods-tab">
					<view class="tabs" v-for="item in 8" :key="item">
						<image src="https://cdn.uviewui.com/uview/album/1.jpg"></image>
						<view>运动装备</view>
					</view>
				</scroll-view>
				<scroll-view scroll-y class="scroll">
					<view class="goods-list">
						<navigator url="/page_venues/pages/venuesDetail/goodsRent/goodsRent" class="item"
							v-for="item in 5" :key="item">
							<view class="image flex-center">
								<image mode="aspectFill" class="top"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/89bf50c1b9aa523e038cb52ba4330d37789d0e60.png">
								</image>
								<image class="img" mode="widthFix" src="https://cdn.uviewui.com/uview/album/1.jpg">
								</image>
								<view class="bottom-text">仅剩1件</view>
							</view>
							<view class="bottom">
								<view class="bootom-title elipsis-1"> 哈他访华瑜伽垫子 </view>
								<view class="flex-align">
									<view class="price">￥128.00</view>
									<view class="price-2">￥128.00</view>
								</view>
							</view>
						</navigator>
					</view>
				</scroll-view>
			</view>

			<!-- 活动桌位 -->
			<view class="data-list4" v-if="menuActive === 6">
				<u-tabs :list="list1" :activeStyle="{ fontWeight: 700 }" :inactiveStyle="{ color: '#999999' }"></u-tabs>
				<scroll-view scroll-y class="scroll">
					<navigator url="/pages/activity-seat/activity-seat" class="data-item flex-align">
						<view class="image">
							<view class="tag">个人赛</view>
							<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" width="100%" height="100%">
							</u--image>
						</view>

						<view class="detail">
							<view>
								<view class="title ellipsis-1">雪雁的时代的hi我IHI第啊打完我</view>
								<view class="count-down">
									<u-count-down :time="30 * 60 * 60 * 1000" format="DD:HH:mm:ss" autoStart millisecond
										@change="onChange">
										<view class="time">
											<text>{{ timeData.days }}</text>天
											<text>{{
                        timeData.hours > 10
                          ? timeData.hours
                          : "0" + timeData.hours
                      }}</text>时 <text>{{ timeData.minutes }}</text>分 <text>{{ timeData.seconds }}</text>秒
										</view>
									</u-count-down>
								</view>
								<view class="det ellipsis-1">报名时间：7月1日-7月16日</view>
							</view>
							<view class="flex-between">
								<view class="price">￥30.00</view>
								<view class="price-2">已售：8张</view>
							</view>
						</view>
					</navigator>
				</scroll-view>
			</view>

			<!-- 教室预定 -->
			<view class="data-list8" v-if="menuActive === 7">
				<u-tabs :list="list1" :activeStyle="{ fontWeight: 700 }" :inactiveStyle="{ color: '#999999' }"></u-tabs>
				<scroll-view scroll-y class="scroll">
					<navigator url="/page_venues/pages/venuesDetail/mettingDetail/mettingDetail"
						class="data-item flex-between" v-for="item in 5" :key="item">
						<view class="detail">
							<view class="detail-1 elipsis-1">三宫综合排练厅（2楼）</view>
							<view class="flex-align">
								<view class="flex-align detail-2">
									<u-icon name="account-fill" color="#7c642a" size="16"></u-icon>
									<text>2500人容纳</text>
								</view>
								<view class="detail-3">面积698m</view>
							</view>
							<view class="detail-4">
								<view class="tag">照明</view>
								<view class="tag">保洁</view>
							</view>
							<view class="flex-align">
								<view class="detail-5">￥4000</view>
								<view class="detail-6">/8小时</view>
							</view>
						</view>
						<image src="https://cdn.uviewui.com/uview/album/1.jpg"></image>
					</navigator>
				</scroll-view>
			</view>

			<!-- 赛事报名 -->
			<view class="data-list9" v-if="menuActive === 8">
				<u-tabs :list="list1" :activeStyle="{ fontWeight: 700 }" :inactiveStyle="{ color: '#999999' }"
					@click="tabClick"></u-tabs>
				<scroll-view scroll-y class="scroll">
					<navigator :url="'/pages/race/race'+'?id=' + item.id +
              '&cate_type=' +
              item.cate_type+
              '&venue_name=' +
              venueDetail.venue_name +
              '&venue_id=' +
              venueDetail.id+
              '&windows=' +
              item.windows" class="data-item" v-for="(item, index) in products" :key="index">

						<view class="image">
							<u--image :src="item.show_img" radius="7" width="100%" height="220rpx"></u--image>
							<view class="top-tag">自定义</view>
						</view>
						<view class="title"> {{ item.race_name }} </view>
						<view class="count-down flex-between" style="color: rgb(190,190,190);
  font-size: 22rpx;">
							<text>{{ item.subtitle }}</text>
							<!-- <u-count-down :time="30 * 60 * 60 * 1000" format="DD:HH:mm:ss" autoStart millisecond
								@change="onChange">
								<view class="time">
									<text>{{ timeData.days }}</text>天
									<text>{{
                    timeData.hours > 10 ? timeData.hours : "0" + timeData.hours
                  }}</text>时 <text>{{ timeData.minutes }}</text>分 <text>{{ timeData.seconds }}</text>秒
								</view>
							</u-count-down>
							<view class="price">￥<text>888.00</text></view> -->
						</view>
					</navigator>
				</scroll-view>
			</view>

			<!-- <view v-if="menuActive === 0 && menuActive === 1 && menuActive === 3 && menuActive === 4 && menuActive === 5 && menuActive === 6 && menuActive === 7 && menuActive === 8" > -->
			<view v-if="products.length === 0" style="position: absolute;top: 200rpx; left: 30%;">
				<u-empty mode="list" text="暂无类目,看看其他商品吧~"
						icon="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/637257a18b233da5ee6f77e1f4198e5875b9574d.png">
					</u-empty>
				<!-- <image @click="onlist" style="width: 300rpx; height: 170rpx;"
					src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/7b4897e63801af5de1b580d2e2ed021461ba21b9.png"
					mode=""></image> -->
			</view>
			<!-- </view> -->
			<!-- <view v-if="menuActive === 0 && menuActive === 1 && menuActive === 3 && menuActive === 4 && menuActive === 5 && menuActive === 6 && menuActive === 7 && menuActive === 8" >
				<view v-for="(item, index) in products" :key="index">
					<view v-if="item.windows[index].cate.length === 0">
						<u-empty mode="list"
							icon="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/637257a18b233da5ee6f77e1f4198e5875b9574d.png">
						</u-empty>
					</view>
					
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	const train = require("@/api/train/index.js");
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	import uniRate from "@/uni_modules/uni-rate/components/uni-rate/uni-rate.vue";
	const venues = require("@/api/venues/venues.js");
	export default {
		components: {
			QSNavbar,
			uniRate,
		},
		data() {
			return {
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "left",
						width: 15,
						doEvent: "back",
						iconColor: "#fff",
					},
					{
						type: "text",
						text: "",
						width: 70,
						weight: "bold",
						color: "#fff",
						textAlign: "left",
					},
				],
				list1: [],
				venueDetail: {},
				timeData: {},
				menuActive: 0,
				products: [],
				id: 0,
				time_list: '',
				each_num: {
					open_time_start: '',
					open_time_end: '',
				},
				windows: '',
				venueDetaillist: [],
				belonglist: {},
				listQuery: { //分页
					pageNo: 1,
					pageSize: 10,
				},
				totalPage: '', //几页
				index_list: {}
			};
		},
		onLoad(options) {
			this.id = options.id;
			this.getVenueDetail(options.id);

		},
		methods: {
			// 获取场馆详情
			async getVenueDetail(id, index = 0) {
				// uni.showLoading({
				// 	title: "加载中",
				// });
				let postData = {
					shop_id: id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					block: 'top'
				};
				let result = await venues.getShopIndex(postData);
				if (result.code === 1) {
					this.venueDetail = result.data;
					this.navbarItems_1[1].text = this.venueDetail.venue_name;
					this.windows = result.data.windows
					this.getVenuelist(this.id);
					// uni.hideLoading();
					// if (result.data.windows[index]?.cate.length == 0) {
					// 	this.list1 = [];
					// 	this.products = [];
					// 	uni.hideLoading();
					// uni.hideLoading();
					// 	return uni.showToast({
					// 		title: "暂无数据",
					// 		icon: "none",
					// 	});
					// } else {
					// 	this.$nextTick(() => {
					// 		this.products = [];
					// 		this.list1 = this.venueDetail?.windows[index].cate;
					// 		this.products = this.venueDetail?.windows[index].cate[0].products;
					// 		uni.hideLoading();
					// 	});
					// }
				}
			},
			async getVenuelist(id, index = 0) {
				// uni.showLoading({
				// 	title: "加载中",
				// });
				let postData = {
					shop_id: id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					block: 'window',
					windows: this.windows
				};
				let result = await venues.getShopIndex(postData);
				if (result.code === 1) {
					this.venueDetaillist = result.data.windows;
					this.menuActive = result.data.windows[0].name_sign
					let item = this.venueDetaillist[0];
					this.getDetaillist(item, this.id, 0)
					// uni.hideLoading();
				}
			},
			async getDetaillist(item, id, index = 0) {
				this.belonglist = item
				// uni.showLoading({
				// 	title: "加载中",
				// });
				let postData = {
					shop_id: id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					block: 'cate',
					belong: item.belong,
				};
				let result = await venues.getShopIndex(postData);
				if (result.code === 1) {
					this.list1 = result.data.cates;
					let belong = this.venueDetaillist[0].belong;
					this.getcatelist(this.belonglist.belong, this.list1[0].id)
					// uni.hideLoading();
				}
			},
			async getcatelist(belong, id) {
				let that = this;
				if (this.listQuery.pageNo === 1) that.ordersList = [];
				// uni.showLoading({
				// 	title: "加载中",
				// });
				let postData = {
					shop_id: this.id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					block: 'products',
					belong: belong,
					cate_id: id,
					page: this.listQuery.pageNo,
					limit: this.listQuery.pageSize,
				};
				let result = await venues.getShopIndex(postData);
				if (result.code === 1) {
					// this.products = result.data.products.data
					that.products = that.products.concat(result.data.products.data); //将数据拼接在一起
					that.totalPage = result.data.products.last_page
					// uni.hideLoading();
				}
			},
			// 滚动加载
			onReachBottom() {
				// uni.showLoading({
				// 	title: '加载中'
				// });
				if (this.totalPage <= this.listQuery.pageNo) {
					// uni.hideLoading();
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1;
				let belong = this.belonglist.belong
				this.getcatelist(belong, this.list1[0].id)
			},
			// 之前详情
			openStoreDetail() {
				// uni.navigateTo({
				// 	url: "/page_points/storeDetail/storeDetail",
				// });
				uni.navigateTo({
					url: "/pages_other/venue_details/venue_details?venues_id=" + this.id,
				});
			},
			onChange(e) {
				this.timeData = e;
			},
			openDetail() {
				uni.navigateTo({
					url: "/pages/index/coach/coachDetail",
				});
			},
			onlist() {
				// this.tabClick()
			},
			//切换菜单
			changeMenu(item, index, nameSign) {
				this.listQuery.pageNo = 1
				this.products = []
				this.list1 = []
				this.menuActive = nameSign;
				this.getDetaillist(item, this.id, index);

			},
			tabClick(index) {
				this.products = []
				this.listQuery.pageNo = 1
				this.index_list = index
				let belong = this.belonglist.belong
				this.getcatelist(belong, index.id)
			},
			cdClick(item) {
				var _this = this
				var now = new Date()
				var h = now.getHours(); //获取当前小时数(0-23)
				var min = now.getMinutes(); //获取当前分钟数(0-59)
				if (h < 10) {
					h = '0' + h
				}
				if (min < 10) {
					min = '0' + min
				}
				this.time_list = h + ':' + min
				let data = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					product_id: item.id
				};
				train.getCourtProduct(data).then(result => {
					// this.each_num.open_time_end = result.data.result.open_time_end
					// this.each_num.open_time_start = result.data.result.open_time_start
					let open_time_end = result.data.result.open_time_end
					let open_time_start = result.data.result.open_time_start
					let tip = result.data.result.tip
					if (this.time_list > open_time_start && this.time_list < open_time_end) {
						// uni.navigateTo({
						// 	url: '/page_venues/pages/venuesDetail/stadium/stadium?pid=' + item.withCourt
						// 		.pid +
						// 		"&id=" +
						// 		item.id +
						// 		"&court_id=" +
						// 		item.court_id +
						// 		"&name=" +
						// 		item.name +
						// 		'&venueDetail=' +
						// 		this.venueDetail.id
						// })
						uni.navigateTo({
							url: '/page_venues/pages/venuesDetail/stadium/stadium?id=' + item.id +
								"&court_id=" +
								item.id +
								"&name=" +
								item.court_name +
								'&venue_id=' +
								this.venueDetail.id +
								'&windows=' +
								item.windows
						})
					} else {
						uni.showModal({
							// title: data[1],
							content: tip,
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				})

				// if (this.time_list > '08:00' && this.time_list < '24:00') {
				// uni.navigateTo({
				// 	url:'/page_venues/pages/venuesDetail/stadium/stadium?pid=' + item.withCourt.pid+
				//         "&id=" +
				//         item.id+
				//         "&court_id=" +
				//         item.court_id +
				// "&name=" +
				// item.name +
				//           '&venueDetail=' +
				//           this.venueDetail.id
				// })
				// }
			},
			addresslist(){
				// uni.navigateTo({
				// 	url:'/page_points/page_points/self_mention?address=' + this.venueDetail.address+
				//         "&lat=" + this.venueDetail.lat+ "&lng=" + this.venueDetail.lng
				// })
				uni.openLocation({
					latitude: Number(this.venueDetail.lat), //要去的纬度-地址
					longitude: Number(this.venueDetail.lng), //要去的经度-地址
					address:  this.venueDetail.address,   //要去的具体地址
				
					//此处踩坑的问题2：
					//latitude 和 longitude的值一定要是number类型。
					//所以传递的时候需要使用Number将其转换一下。
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.control {
		width: 100%;
		// min-height: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.box-1 {
		position: relative;
		width: 100%;

		>image {
			display: block;
			width: 100%;
		}

		.postion {
			position: absolute;
			width: 100%;
			top: 0;
			left: 0;
			box-sizing: border-box;
		}

		.box-1-con {
			image {
				display: block;
				width: 100%;
			}

			.box-1-dian {
				height: 120rpx;
				padding: 0px 30rpx;
				margin-top: 19rpx;

				.image {
					width: 160rpx;
					height: 100%;
					border-radius: 5px;
					// overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.dian-info {
					margin-left: 20rpx;
					display: flex;
					height: 100%;
					flex-direction: column;
					justify-content: space-around;

					.title {
						color: rgb(255, 255, 255);
						font-size: 33rpx;
						font-weight: 700;
					}

					/deep/ .u-tag-wrapper {
						margin-right: 20rpx;

						.u-tag {
							border-radius: 17px;
							font-size: 26rpx;
							height: 40rpx;
							padding: 0px 15rpx;
						}
					}

					.desc {
						color: rgb(255, 255, 255);
						font-size: 22rpx;
						font-weight: 700;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						width: 380rpx;
					}
				}

				.btn {
					color: rgb(255, 255, 255);
					background-color: rgb(254, 140, 97);
					border-radius: 23px;
					font-size: 24rpx;
					padding: 10rpx 30rpx;
					margin-top: 60rpx;
				}
			}
		}

		.box-2-con {
			margin-top: 20rpx;
			box-sizing: border-box;
			padding: 0px 30rpx;

			.list {
				display: flex;
				overflow-x: auto;
				border-radius: 20rpx;
				background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/7a2e7ef51359cc5e18cbee07dc7fb1bc5230398b.png");
				background-repeat: no-repeat;
				padding-bottom: 40rpx;
				background-size: 100% calc(100% - 40rpx);

				.active {
					font-weight: 700;

					text {
						font-size: 22rpx !important;
						margin-top: 20rpx !important;
					}

					.jian {
						opacity: 1 !important;
					}
				}

				.item {
					height: 130rpx !important;
					flex-shrink: 0;
					width: 140rpx;
					padding: 23rpx 0rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					box-sizing: border-box;
					position: relative;

					.icon {
						width: 50rpx;
						height: 50rpx !important;
					}

					text {
						margin-top: 18rpx;
						font-size: 20rpx;
					}

					.jian {
						position: absolute;
						width: 50rpx;
						transition: all 0.3s;
						height: 30rpx;
						opacity: 0;
						bottom: -20rpx;
					}
				}
			}
		}
	}

	.box-2 {
		// padding: 0px 30rpx;
		padding: 0px 10rpx;
		margin-left: 20rpx;
		flex: 1;
		height: 0;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		transform: translateY(-60rpx);

		>view {
			flex: 1;
			height: 0;

			.scroll {
				// height: calc(100% - 40rpx);
				height: 100%;
			}
		}

		// 列表1
		.data-list1 {
			.data-item {
				margin-top: 20rpx;
				height: 288rpx;
				width: 690rpx;
				background-color: #ffffff;
				padding: 10rpx;
				border: 0.1rpx linear-gradient(190deg, #FFF, #FFF) solid;
				border-radius: 6rpx;
				box-shadow: 30px 2px 10px #f9f9f9;

				.image {
					padding-left: 10rpx;
					width: 211rpx;
					height: 248rpx;

					/deep/ .u-fade-enter-to {
						height: 100%;
					}
				}

				.detail {
					height: 230rpx;
					width: 0;
					flex: 1;
					margin-left: 25rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						font-size: 30rpx;
						margin-bottom: 10rpx;
						font-weight: bold;
					}

					.tag-list {
						margin-bottom: 10rpx;

						.tag {
							font-size: 22rpx;
							border-radius: 10rpx;
							padding: 5rpx 10rpx;
							color: white;
							background-color: #abc6fa;
							margin-right: 10rpx;
						}
					}

					.tiemr {
						color: #cfcfcf;
						font-size: 22rpx;
					}

					.price {
						font-size: 32rpx;
						color: #ff4811;
						font-weight: 700;
						margin-right: 10rpx;
					}

					.price-2 {
						color: #cfcfcf;
						font-size: 22rpx;
						text-decoration: line-through;
					}
				}
			}
		}

		//列表2
		.data-list2 {
			.data-item {
				// margin-top: 20rpx;
				height: 220rpx;
				padding: 10rpx;

				.image {
					width: 289rpx;
					height: 183rpx;

					/deep/ .u-fade-enter-to {
						height: 100%;
					}
				}

				.detail {
					height: 100%;
					width: 0;
					flex: 1;
					margin-left: 25rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						font-size: 28rpx;
						margin-bottom: 10rpx;
					}

					.tag-list {
						margin-bottom: 10rpx;

						.tag {
							font-size: 22rpx;
							border-radius: 10rpx;
							padding: 5rpx 10rpx;
							color: white;
							background-color: #abc6fa;
							margin-right: 10rpx;
						}
					}

					.info {
						font-weight: 700;
						font-size: 25rpx;
						color: #ff4811;
					}

					.price {
						font-size: 32rpx;
						color: #ff4811;
						font-weight: 700;
						margin-right: 10rpx;
					}

					.price-2 {
						color: #999999;
						font-size: 22rpx;
					}
				}
			}
		}

		.data-list {
			.data-item {
				width: 100%;
				height: 160rpx;
				border-bottom: solid 2rpx rgb(229, 229, 229);
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;

				// &:last-of-type {
				// 	margin-bottom: 0;
				// 	padding-bottom: 0;
				// }

				.image {
					width: 156rpx;
					height: 154rpx;
					border-radius: 5px;
					// overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.detail {
					display: flex;
					margin-left: 20rpx;
					height: 100%;
					flex-direction: column;
					justify-content: space-between;

					.tag-list {
						margin-bottom: 20rpx;

						.tag {
							font-size: 22rpx;
							border-radius: 10rpx;
							padding: 5rpx 10rpx;
							color: white;
							background-color: #abc6fa;
							margin-right: 10rpx;
						}
					}

					.detail-info {
						color: rgb(255, 65, 5);
						font-size: 30rpx;
						font-weight: 700;

						&:first-of-type {
							margin-bottom: 7rpx;
						}
					}
				}

				.btn {
					border-radius: 8px;
					color: white;
					padding: 10rpx 25rpx;
					font-size: 25rpx;
					background-image: linear-gradient(0deg,
							rgb(47, 117, 250) 0%,
							rgb(82, 142, 255) 100%);
				}
			}
		}

		.data-list4 {
			.data-item {
				margin-top: 20rpx;
				height: 220rpx;
				padding: 10rpx;

				.image {
					width: 300rpx;
					height: 100%;
					position: relative;

					.tag {
						color: white;
						background-color: #abc6fa;
						padding: 5rpx 10rpx;
						position: absolute;
						left: 0;
						top: 0;
						z-index: 1;
						font-size: 20rpx;
						border-radius: 0px 0rpx 8rpx 0;
					}

					/deep/ .u-fade-enter-to {
						height: 100%;
					}
				}

				.detail {
					height: 100%;
					width: 0;
					flex: 1;
					margin-left: 25rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						font-size: 28rpx;
						margin-bottom: 10rpx;
					}

					.count-down {
						height: 35rpx;

						.time {
							font-size: 20rpx;
							display: flex;

							text {
								color: #f63939;
								display: block;
								background-color: #fdc4c3;
								border-radius: 8rpx;
								width: 40rpx;
								text-align: center;
								margin: 0px 6rpx;

								&:first-of-type {
									margin-left: 0;
								}
							}
						}
					}

					.info {
						font-weight: 700;
						font-size: 25rpx;
						color: #ff4811;
					}

					.det {
						font-size: 22rpx;
						color: #999999;
					}

					.price {
						font-size: 32rpx;
						color: #ff4811;
						font-weight: 700;
						margin-right: 10rpx;
					}

					.price-2 {
						color: #999999;
						font-size: 22rpx;
					}
				}
			}
		}

		.data-list5 {
			.goods-item {
				height: 220rpx;
				margin-top: 30rpx;

				.image {
					width: 200rpx;
					height: 100%;
					border-radius: 7rpx;
					// overflow: hidden;
					position: relative;

					/deep/ .u-transition {
						width: 100%;
						height: 100%;
					}

					.image-info {
						position: absolute;
						bottom: 0;
						width: 100%;
						left: 0;
						font-size: 24rpx;
						text-align: center;
						color: white;
						padding: 10rpx 0;
						background-color: rgba(0, 0, 0, 0.5);
					}

					.tag1 {
						position: absolute;
						top: 0;
						left: 0;
						font-size: 23rpx;
						color: white;
						padding: 7rpx 15rpx;
						border-radius: 0px 0px 15rpx 0px;
						background-image: linear-gradient(to right, #528eff, #2f75fa);
					}
					.tag2 {
						position: absolute;
						top: 0;
						left: 0;
						font-size: 23rpx;
						color: white;
						padding: 7rpx 15rpx;
						border-radius: 0px 0px 15rpx 0px;
						background-image: linear-gradient(to right, #43e090, #26cd78);
					}
					.tag3 {
						position: absolute;
						top: 0;
						left: 0;
						font-size: 23rpx;
						color: white;
						padding: 7rpx 15rpx;
						border-radius: 0px 0px 15rpx 0px;
						background-image: linear-gradient(to right, #ed7af4, #ec46f6);
					}
				}

				.detail {
					flex: 1;
					width: 0;
					height: 100%;
					display: flex;
					flex-direction: column;
					margin-left: 30rpx;
					justify-content: space-between;

					.title {
						font-size: 28rpx;
						margin-bottom: 10rpx;
						width: 100%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.tag {
						font-size: 22rpx;
						// background-color: #f4f3f4;
						color: white;
						background-color: #abc6fa;
						border-radius: 8rpx;
						padding: 5rpx 10rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
					}

					.detail-2 {
						color: #a3a3a3;
						font-size: 23rpx;

						image {
							width: 25rpx;
							height: 25rpx;
							margin-right: 10rpx;
						}
					}

					.price {
						color: #ff6a42;

						text {
							font-weight: 700;
							font-size: 37rpx;
						}
					}

					.info {
						color: #a3a3a3;
						font-size: 23rpx;
						margin-left: 15rpx;
						transform: translateY(4rpx);
					}
				}
			}
		}

		.data-list6 {
			.item {
				width: 100%;
				padding-bottom: 24rpx;
				border-bottom: 1px solid #e5e5e5;
				margin-top: 31rpx;

				&:nth-of-type(1) {
					.index {
						color: #ffa800;
					}
				}

				&:nth-of-type(2) {
					.index {
						color: #c0c0c0;
					}
				}

				&:nth-of-type(3) {
					.index {
						color: #b2786b;
					}
				}

				&:last-of-type {
					border: none;
				}

				.index {
					font-size: 36rpx;
					font-family: DIN;
					font-weight: bold;
					color: #95a0af;
					margin-right: 40rpx;
				}

				.con {
					height: 100%;
					flex: 1;
					display: flex;
				}

				.image {
					width: 130rpx;
					height: 100%;
					margin-right: 24rpx;
					position: relative;

					.small {
						width: 100%;
						height: 80rpx;
						position: absolute;
						bottom: -20rpx;
						left: 0;
					}
				}

				.box {
					flex: 1;
					width: 0;

					.info-1 {
						margin-bottom: 10rpx;

						.name {
							font-size: 28rpx;
							font-weight: bold;
							color: #333333;
						}

						/deep/ .u-tag {
							height: 40rpx;
							margin-left: 20rpx;

							.u-tag__text {
								font-size: 20rpx;
							}
						}
					}

					.info-2 {
						margin-bottom: 10rpx;

						.tag {
							font-size: 22rpx;
							font-weight: 400;
							color: #ff8f05;
							margin-left: 20rpx;
						}
					}

					.info-3 {
						font-size: 22rpx;
						font-weight: 400;
						color: #999999;
						white-space: nowrap;
						overflow: hidden;
						width: 100%;
						text-overflow: ellipsis;
					}

					.info-4 {
						font-size: 22rpx;
						font-weight: 500;
						color: #333333;
					}
				}
			}
		}

		.data-list7 {
			.goods-tab {
				white-space: nowrap;

				.tabs {
					display: inline-block;
					margin-right: 20rpx;

					image {
						height: 90rpx;
						width: 90rpx;
					}

					view {
						font-size: 20rpx;
						font-weight: 500;
						color: #333333;
						margin-top: 10rpx;
						text-align: center;
					}
				}
			}

			.goods-list {
				display: flex;
				flex-wrap: wrap;
				margin-top: 30rpx;
				justify-content: space-between;

				.item {
					border: 0px solid #e5e5e5;
					width: 48%;
					margin-bottom: 30rpx;

					.image {
						width: 100%;
						position: relative;
						background: #f3f3f3;
						border-radius: 5px 5px 0px 0px;
						height: 300rpx;

						.img {
							width: 80%;
						}

						.top {
							position: absolute;
							left: 0;
							top: -20rpx;
							width: 60rpx;
							height: 68rpx;
						}

						.bottom-text {
							position: absolute;
							right: 20rpx;
							bottom: 10rpx;
							font-size: 22rpx;
							z-index: 3;
							color: #bebebe;
						}
					}

					.bottom {
						border: 1px solid #e5e5e5;
						border-top: none;
						border-radius: 0 0 5px 5px;
						padding: 20rpx;

						.bootom-title {
							font-size: 26rpx;
							font-weight: bold;
							color: #333333;
							margin-bottom: 20rpx;
						}

						.price {
							font-size: 26rpx;
							font-weight: bold;
							color: #ff0f0f;
						}

						.price-2 {
							font-size: 22rpx;
							font-weight: bold;
							margin-left: 6rpx;
							text-decoration: line-through;
							color: #bebebe;
						}
					}
				}
			}
		}

		.data-list8 {
			.data-item {
				border-bottom: 1px solid #f2f2f3;
				padding-bottom: 30rpx;
				margin-bottom: 30rpx;

				&:last-of-type {
					margin-bottom: 0;
					border-bottom: 0;
				}

				.detail {
					flex: 1;
					width: 0;
					padding-right: 40rpx;

					.detail-1 {
						font-size: 28rpx;
						font-weight: 700;
						margin-bottom: 15rpx;
					}

					.detail-2 {
						font-size: 22rpx;
						color: #7c642a;
						padding: 5rpx 10rpx;
						border-radius: 8rpx;
						background-color: #eedd9b;

						text {
							margin-left: 10rpx;
						}
					}

					.detail-3 {
						margin-left: 20rpx;
						font-size: 22rpx;
						color: #d2d2d2;
					}

					.detail-4 {
						margin-top: 20rpx;
						margin-bottom: 30rpx;
						display: flex;

						.tag {
							color: #ff4747;
							font-size: 22rpx;
							margin-right: 8rpx;
							border-radius: 8rpx;
							padding: 5rpx;
							border: 1px solid #ff4747;
						}
					}

					.detail-5 {
						font-size: 33rpx;
						color: #ff1616;
						font-weight: 700;
					}

					.detail-6 {
						font-size: 20rpx;
						margin-left: 5rpx;
					}
				}

				image {
					width: 240rpx;
					height: 240rpx;
					border-radius: 10px;
				}
			}
		}

		.data-list9 {
			margin-top: 20rpx;

			.data-item {
				margin-bottom: 30rpx;
				margin-top: 20rpx;

				.image {
					position: relative;

					.top-tag {
						position: absolute;
						top: 0;
						left: 0;
						border-radius: 5px 0px 0 0;
						color: white;
						background-color: #abc6fa;
						font-size: 22rpx;
						padding: 5rpx 10rpx;
					}
				}

				.title {
					font-size: 30rpx;
					margin-top: 10rpx;
					// margin-bottom: 10rpx;
				}

				.count-down {
					height: 35rpx;

					.time {
						font-size: 20rpx;
						display: flex;

						text {
							color: #f63939;
							display: block;
							background-color: #fdc4c3;
							border-radius: 8rpx;
							width: 40rpx;
							text-align: center;
							margin: 0px 6rpx;

							&:first-of-type {
								margin-left: 0;
							}
						}
					}

					.price {
						font-size: 22rpx;
						color: #ff571c;

						text {
							font-size: 35rpx;
							font-weight: 700;
						}
					}
				}
			}
		}
	}
</style>
